<template>
    <div>
        <canvas id="canvas" :style="{height :pageHeight, width : pageWidth}"></canvas>
    </div>
</template>

<script>
    export default {
        name: "canvas",
        data() {
            return {
                // 页面尺寸信息
                pageHeight: window.innerHeight + 'px',
                pageWidth: window.innerWidth + 'px',

                speed : 0,
                startPoint : 800,
            }
        },
        methods : {
            initCanvas() {
                let canvas = document.getElementById("canvas");
                canvas.height = window.innerHeight;
                canvas.width = window.innerWidth;
                let context = canvas.getContext("2d");

                context.beginPath();

                context.arc(800,300,30,0,2*Math.PI,true);
                // context.arc(300, 300, 100, 0, 2 * Math.PI);
                context.closePath();

                context.fillStyle = 'red';
                context.fill();
                context.stroke();

                // setInterval(() => {
                    // this.run(context);
                // }, 50);
            },
            run(context){
                this.speed = -7;
                context.clearRect(0,0,1024,728);
                //cxt.top+=speed;
                this.startPoint += this.speed;
                context.beginPath();
                context.arc(this.startPoint,300,30,0,2*Math.PI,true);
                context.closePath();
                context.fill();
            },
        },
        created() {

        },
        mounted() {


            window.onresize = () => {
                this.pageHeight = window.innerHeight + 'px';
                this.pageWidth = window.innerWidth + 'px';
            };

            this.initCanvas();

        }
    }
</script>

<style scoped>

</style>
